<%@ page language="java" contentType="text/html;charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<link href="../css/ui/swanky-purse/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css">
	<link href="../css/tablesorter/green/style.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="../js/ui/jquery.ui.effect.js"></script>
	<script type="text/javascript" src="../js/ui/jquery.ui.effect-clip.js"></script>
	<script type="text/javascript" src="../js/tablesorter/jquery-latest.js"></script>
	<script type="text/javascript" src="../js/tablesorter/jquery.tablesorter.js"></script>
	<script type="text/javascript" src="../js/tablesorter/jquery.tablesorter.pager.js"></script>
	<script type="text/javascript" src="../js/ui/ui.core.js"></script>
	<script type="text/javascript" src="../js/ui/ui.dialog.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){       

		        $("#divFormulario").hide();
		        //$("#divMensaje").hide();
		        
		        buscar("PERCODIGO_I","");
		        
		        $("#btnNuevo").click(function(){
		        	llenarFormulario("");
		        });
		        
		        $("#btnCancelar").click(function(){
		        	$("#divFormulario").dialog("close");
		        });
		        
		        $("#btnProcesar").click(function(){
		        	$.ajax({ 
		        		data:{
		        			percodigoI:$("#percodigoI").val(),
		        			pernombreV:encodeURIComponent($("#pernombreV").val()),
		        			perpaternoV:encodeURIComponent($("#perpaternoV").val()),
		        			permaternoV:encodeURIComponent($("#permaternoV").val()),
		        			peredadI:$("#peredadI").val(),
		        			perdniV:$("#perdniV").val()
		        		},
		        	    datatype:'html',
                        type: "POST", 
                        url: "Procesar.jf", 
                        success: function(data){
                        	mensaje(data);
                        },error: function(jqXHR, textStatus, errorThrown){
                        	mensajeError();
                        }
		        	});
		        	$("#divFormulario").dialog("close");
		        	buscar("PERDNI_V",$("#perdniV").val());
		        });
		        
		        function mensaje(data){
		        	$("#divMensaje").empty();
		        	$("#divMensaje").append(data);
                	$("#divMensaje").show();
                	var top=(screen.height-200)+'px';
                	var left=(screen.width-400)+'px';
                	$("#divMensaje").css({'position':'absolute','top':top,'left':left});
                	setTimeout(function() {
						$("#divMensaje").hide();
					}, 1500 );
		        }
		        
				$(".btnModificar").click(modificar); 
		        
		        function modificar(){
		        	$.ajax({ 
		        		data:{
		        			codigo:$(this).attr("id").replace("mod","")
		        		},
                        datatype:'json',
                        type: "GET", 
                        url: "Obtener.jf", 
                        success: function(data){
                        	llenarFormulario(data);
                        },error: function(jqXHR, textStatus, errorThrown){
                        	mensajeError();
                        }
		        	});
		        }
		        
		        function mensajeError(){
		        	$("#divConfirmacion").remove();
		        	$("body").append("<div id='divConfirmacion'><p>Usted no tiene permisos</p></div>");
		        	$("#divConfirmacion").dialog({
		        		title: 'Error',
		    			bgiframe: true,
		    			modal: true,
		    			buttons: {
		    				'Aceptar': function() {
		    					$(this).dialog('close');
		    				}
		    			}
		    		});
		        }
		        
		        function eliminar(){
		        	var codigo=$(this).attr("id").replace("del","");
		        	//alert(codigo);
		        	$("#divConfirmacion").remove();
		        	$("body").append("<div id='divConfirmacion'><p>¿Esta seguro que desea eliminar?</p></div>");
		        	$("#divConfirmacion").dialog({
		    			title:'Eliminar',
		        		resizable: false,
		    			height:140,
		    			modal: true,
		    			overlay: {
		    				backgroundColor: '#000',
		    				opacity: 0.5
		    			},buttons: {
		    				'Eliminar': function() {
		    					$.ajax({ 
		    		        		data:{
		    		        			codigo:codigo
		    		        		},
		                            datatype:'html',
		                            type: "GET", 
		                            url: "Eliminar.jf", 
		                            success: function(data){
		    							mensaje(data);
		                            },error: function(jqXHR, textStatus, errorThrown){
		                            	mensajeError();
		                            }
		    		        	});
		    		        	buscar($("#sltCriterio").val(),$("#txtTexto").val());
		    		        	$(this).dialog('close');
		    				},
		    				'Cancelar': function() {
		    					$(this).dialog('close');
		    				}
		    			}
		    		});
		        }
		        
		        $("#btnBuscar").click(function(){
		        	buscar($("#sltCriterio").val(),$("#txtTexto").val());
		        });
		        
		        function buscar(criterio,texto){
		        	$.ajax({ 
		        		data:{
		        			criterio:criterio,
		        			texto:texto
		        		},
                        datatype:'json',
                        type: "POST", 
                        url: "Listar.jf", 
                        success: function(data){
                        	//alert(JSON.stringify(data));
                        	llenarTabla(data);
                        },error: function(jqXHR, textStatus, errorThrown){
                        	mensajeError();
                        }
		        	});		        	
		        }
		        
		        function llenarFormulario(data){
		        	if(data!=""){
			        	$("#percodigoI").val(data.percodigoI);
			        	$("#pernombreV").val(data.pernombreV);
			        	$("#perpaternoV").val(data.perpaternoV);
			        	$("#permaternoV").val(data.permaternoV);
			        	$("#peredadI").val(data.peredadI);
			        	$("#perdniV").val(data.perdniV);
		        	}else{
		        		$("#percodigoI").val(0);
			        	$("#pernombreV").val("");
			        	$("#perpaternoV").val("");
			        	$("#permaternoV").val("");
			        	$("#peredadI").val(0);
			        	$("#perdniV").val("");		        		
		        	}
		        	$("#divFormulario").dialog("open");
		        	$("#divFormulario").dialog({
                		title:"Persona",
                		height: 400,
                		modal: true
                	});
		        }
		        
		        function llenarTabla(data){
		        	if(data==""){ 
		        		$("#tblLista").empty();
		        		return;
		        	}
		        	var txtHtml="";
		        	$("#tblLista").empty();
		        	txtHtml="<thead>"
						+"<th class='header'>NUM</th>"
						+"<th class='header'>DNI</th>"
						+"<th class='header'>NOMBRE</th>"
						+"<th class='header'>PATERNO</th>"
						+"<th class='header'>MATERNO</th>"
						+"<th class='header'>EDAD</th>"
						+"<th class='header'>MODIFICAR</th>"
						+"<th class='header'>ELIMINAR</th>"
						+"</thead>"
						+"<tfoot>"
						+"<th>NUM</th>"
						+"<th>DNI</th>"
						+"<th>NOMBRE</th>"
						+"<th>PATERNO</th>"
						+"<th>MATERNO</th>"
						+"<th>EDAD</th>"
						+"<th>MODIFICAR</th>"
						+"<th>ELIMINAR</th>"
						+"</tfoot>"
						+"<tbody></tbody>";
						$("#tblLista").append(txtHtml);
		        	for(var x=0;x<data.length;x++){
		        		txtHtml="<tr>"+
    					"<td>"+(x+1)+"</td>"+
    					"<td>"+data[x].perdniV+"</td>"+
    					"<td>"+data[x].pernombreV+"</td>"+
    					"<td>"+data[x].perpaternoV+"</td>"+
    					"<td>"+data[x].permaternoV+"</td>"+
    					"<td>"+data[x].peredadI+"</td>"+
    					"<td><img alt='Modificar' class='btnModificar' id='mod"+data[x].percodigoI+"' src='../images/edit.png'></td>"+
    					"<td><img alt='Eliminar' class='btnEliminar' id='del"+data[x].percodigoI+"' src='../images/delete.png'></td>"+
		        				"</tr>";
		        		$("#tblLista tbody").append(txtHtml);
		        	}
					
		        	$(".btnModificar").click(modificar);
		        	$(".btnEliminar").click(eliminar);
		        	paginacion();
		        }
		        
		        function paginacion(){
					$("#tblLista")//.tablesorter(); 
			        .tablesorter({widthFixed: true, widgets: ['zebra']}) 
			        .tablesorterPager({container: $("#pager")}); 	
				}
		});
	</script>
	<style type="text/css">
            #tblLista{
            	width: 500px;
            }
        </style>
	<title>Insert title here</title>
</head>
<body>

	<h2 align="center">Mantenimiento Persona</h2>
	<div id="divBuscar">
		<table>
			<tr>
				<td>Criterio</td>
				<td>Texto</td>
				<td></td>
			</tr>
			<tr>
				<td>
					<select id="sltCriterio">
						<option value="PERDNI_V">DNI</option>
						<option value="PERNOMBRE_V">Nombres</option>
						<option value="PERPATERNO_V">Paterno</option>
						<option value="PERMATERNO_V">Materno</option>
					</select>
				</td>
				<td><input type="text" id="txtTexto" /></td>
				<td><input type="button" id="btnBuscar" value="Buscar"/></td>
			</tr>
		</table>
	</div>
	<div id="divLista">
		<table align="center" class="tablesorter" id="tblLista">		
		</table>
	</div>
	<div id="divFormulario">
		<h1 align="center">Formulario Persona</h1>
		<input type="hidden" id="percodigoI"/>
		<table align="center">
			<tr>
				<td>Nombre:</td>
				<td><input type="text" id="pernombreV"/>
				</td>
			</tr>
			<tr>
				<td>Paterno:</td>
				<td><input type="text" id="perpaternoV"/></td>
			</tr>
			<tr>
				<td>Materno:</td>
				<td><input type="text" id="permaternoV"/></td>
			</tr>
			<tr>
				<td>Edad:</td>
				<td><input type="text" id="peredadI"/></td>
			</tr>
			<tr>
				<td>DNI</td>
				<td><input type="text" id="perdniV"/></td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<input type="button" value="Procesar" id="btnProcesar" class="ui-button"/>
					<input type="button" value="Cancelar" id="btnCancelar" class="ui-button"/>
				</td>
			</tr>
		</table>
	</div>
	<div id="pager" class="pager">
		<form>
			<img src="../js/tablesorter/addons/pager/icons/first.png" class="first">
			<img src="../js/tablesorter/addons/pager/icons/prev.png" class="prev">
			<input type="text" class="pagedisplay">
			<img src="../js/tablesorter/addons/pager/icons/next.png" class="next">
			<select class="pagesize">
				<option selected="selected" value="10">10</option>
				<option value="20">20</option>
				<option value="30">30</option>
				<option value="40">40</option>
			</select>
			<img src="../js/tablesorter/addons/pager/icons/last.png" class="last">
		</form>
	</div>
	<h4 align="center">
		<img id="btnNuevo" alt="Nuevo" src="../images/new.png"/>
		<a href="Reporte/Persona/DescargarPdf.jf">
			<img alt="Imprimir" src="../images/pdf.png">
		</a>
	</h4>
	<div id="divMensaje"></div>
</body>
</html>